<template>
  <div>
    <BasicTable @register="registerTable">
    </BasicTable>
  </div>
</template>

<script lang="tsx" setup>
  import { BasicTable, useTable, FormSchema } from '@/components/Table';
  import { getLogList } from '@/api/log';
  import { formatToDateTime } from '@/utils/dateUtil'
  import { logTypeMap, logModuleMap, logTypeOptions, logModuleOptions } from '@/enums/log'

  const columns: BasicColumn[] = [
    {
      title: '功能模块',
      dataIndex: 'module',
      width: 80,
      customRender: ({ record }) => {
        return logModuleMap[record.module];
      }
    },
    {
      title: '操作人',
      dataIndex: ['user', 'name'],
      width: 80,
      customRender: ({ record }) => {
        return record.user ? record.user.name : '系统';
      },
    },
    {
      title: '类型',
      dataIndex: 'type',
      width: 80,
      customRender: ({ record }) => {
        return logTypeMap[record.type];
      }
    },
    {
      title: '操作内容',
      dataIndex: 'content',
      width: 300,
      align: 'left',
    },
    {
      title: '操作时间',
      dataIndex: 'created_at',
      width: 100,
      customRender: ({ record }) => {
        return formatToDateTime(record.created_at);
      },
    },
  ];

  const searchFormSchema: FormSchema[] = [
    {
      field: 'user',
      label: '操作人',
      component: 'Input',
      colProps: { span: 6 },
    },
    {
      field: 'module',
      label: '功能模块',
      component: 'Select',
      componentProps: {
        options: logModuleOptions,
      },
      colProps: { span: 6 },
    },
    {
      field: 'type',
      label: '类型',
      component: 'Select',
      componentProps: {
        options: logTypeOptions,
      },
      colProps: { span: 6 },
    },
  ];

  const [registerTable] = useTable({
    title: '操作记录',
    api: getLogList,
    columns,
    formConfig: {
      labelWidth: 80,
      schemas: searchFormSchema,
    },
    useSearchForm: true,
    showTableSetting: false,
    bordered: true,
    showIndexColumn: true,
  });

</script>